import React, { Component } from "react";
import { NavBar, List, Button, Toast } from "antd-mobile";
import store from "../store/index";
import * as service from "../api/index";
import "../styles/querenDingdan.scss";

class querenDingdan extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      sum: 0,
      button: true,
    };
  }

  async componentDidMount() {
    var res = await service.cart_list({
      userid: localStorage.getItem("userid"),
    });
    console.log(res);
    this.setState({ list: res.data.data });
    this.state.sum = res.data.data.reduce(function (sum, item) {
      console.log(item.num);
      return (sum += parseInt(item.num * item.originprice));
    }, 0);
    this.button();
  }

  dizhi() {
    this.props.history.push("/index/Dizhilist");
  }

  fanhui() {
    this.props.history.push("/index/shouye");
  }

  button() {
    if (store.getState().dizhi.name) {
      this.setState({ button: false });
    }
  }

  //获取确认订单的信息
  //   async  xinxi(){

  //   }

  async zhifu() {
    // 添加订单获取到time
    var res = await service.order_addOrder({
      userid: localStorage.getItem("userid"),
    });
    store.dispatch({ type: "time", payload: res.data.time });
    // 拿time去修改地址信息
    var res1 = await service.order_updateOrderAddress({
      userid: localStorage.getItem("userid"),
      name: store.getState().dizhi.name,
      tel: store.getState().dizhi.tel,
      province: store.getState().dizhi.province,
      city: store.getState().dizhi.city,
      county: store.getState().dizhi.county,
      addressDetail: store.getState().dizhi.addressDetail,
      time: store.getState().time,
    });
    console.log(res);
    var res2 = await service.order_confirmOrder({
      userid: localStorage.getItem("userid"),
      time: res2.data.time,
    });
    console.log(res);

    if (res2.data.code == 200) {
      Toast.show({
        content: "订单添加成功",
        afterClose: () => {
          console.log("after");
        },
      });
    }
  }

  render() {
    return (
      <div className="querenDingdan">
        <div className="header">
          <NavBar
            onBack={() => {
              this.fanhui();
            }}
          >
            标题
          </NavBar>
        </div>
        <List.Item
          onClick={() => {
            this.dizhi();
          }}
        >
          {store.getState().dizhi.name ? "" : <div>选择地址</div>}
          <div className="item">
            <div className="nav">
              <p>
                {store.getState().dizhi.name}{" "}
                <span>{store.getState().dizhi.tel}</span>
              </p>
              <p>{store.getState().dizhi.addressDetail}</p>
            </div>
          </div>
        </List.Item>

        {
          // console.log(this.state.list)
          this.state.list.map((item, index) => {
            return (
              <div className="item1" key={index}>
                <img src={item.img1} alt="" />
                <div className="item1_right">
                  <p>{item.proname}</p>
                  <div className="item1_right_buttom">
                    <p>${item.originprice}</p>
                    <p>数量:{item.num}</p>
                  </div>
                </div>
              </div>
            );
          })
        }

        <div className="buttom">
          <span>总价{this.state.sum}</span>
          <Button
            onClick={() => {
              this.zhifu();
            }}
            className="btn"
            disabled={this.state.button}
          >
            立即支付
          </Button>
        </div>
      </div>
    );
  }
}

export default querenDingdan;
